<template>
  <div>
    <Dog v-for="(item, index) in dogs"
      :key="index"
      :imgUrl="item.dogImgUrl"
      :dogName="item.dogName"
      @likeDogs="fn(index)"
    ></Dog>
    <h3>你喜欢的狗如下:</h3>
    <ul>
      <li v-for="(item,index) in like" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import Dog from './components/Dog.vue'
export default {
  data() {
    return {
      dogs: [
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'https://img0.baidu.com/it/u=399963322,2424283723&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=2299629937,2291347904&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'https://img1.baidu.com/it/u=368962671,3361600264&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl:
            'https://img0.baidu.com/it/u=359481618,4261037644&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          dogName: '萨摩耶',
        },
      ],
      like:[]
    }
  },
  components: {
    Dog,
  },
  methods: {
    fn(index) {
      this.like.push(this.dogs[index].dogName)
    }
  },
}
</script>

<style>
li{
  list-style: none;
}
</style>
